<template>
  <div class="div">
    <el-card style="margin-top: 200px">
      <h2>操作员</h2>
      <el-form
        :model="form"
        ref="form"
        :rules="rules"
        :inline="false"
        size="normal"
        align="center"
      >
        <el-form-item prop="UserName" style="width: 300px; margin-left: 90px">
          <el-input
            placeholder="用户名/手机号/邮箱"
            clearable
            v-model="form.UserName"
          >
            <template slot="prepend"><i class="el-icon-user"></i></template>
          </el-input>
        </el-form-item>

        <el-form-item
          prop="UserPassword"
          style="width: 300px; margin-left: 90px"
        >
          <el-input
            show-password
            clearable
            placeholder="密码"
            v-model="form.UserPassword"
          >
            <template slot="prepend"><i class="el-icon-lock"></i></template>
          </el-input>
        </el-form-item>
        <br />
        <el-form-item>
          <el-button type="primary" @click="onSubmit('form')">登录</el-button>
          <el-button @click="zhuce">注册</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //字段
      form: {
        UserName: "",
        UserPassword: "",
      },

      //判断验证
      rules: {
        UserName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        UserPassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //注册
    zhuce() {
      this.$router.push("/registered");
    },

    //登录
    onSubmit(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.axios
            .post("https://localhost:44375/api/UserInfo/GetLogin", this.form)
            .then((res) => {
              if (res.data.Code == 2) {
                this.$message.success(res.data.Message);
                this.$router.push("/main");
              } else {
                this.$message.error(res.data.Message);
              }
            });
        }
      });
    },
  },
  created() {},
};
</script>
<style>
.div {
  width: 500px;
  margin: 5px auto;
  background-size: 100% 100%;
}
</style>